<template>
  <div class="profile-view">
    <div class="profile-header">
      <div class="header-left">
        <div style="margin-right: 25px">
          <span style="width: 110px;">
            <img style="width: 110px;border-radius: 50%" :src="userInfo.avatar" alt="">
          </span>

        </div>
        <div>
          <h2 style="margin: 7px 0;color: white;font-size: 20px;font-weight: bolder;">{{ userInfo.name }}</h2>
          <div style="font-size: 13px;margin-bottom: 20px">
            <span>关注 {{ userInfo.guanZhuNumber }}</span>
            <t-divider layout="vertical" />
            <span>粉丝 {{ userInfo.fenSiNumber }}</span>
            <t-divider layout="vertical" />
            <span>获赞 {{ userInfo.likedNumber }}</span>
          </div>

          <span>秒映号：{{ userInfo.userId }}</span>
        </div>
      </div>
      <div class="header-right">
        <div v-if="userStore.userId == userInfo.userId">
          <t-button class="btn">编辑资料</t-button>
        </div>
        <div v-else>
          <ConfettiButton v-if="!userInfo.isGuanZhu" @click="handleOperate(userInfo, 4, 1)" style="margin-right: 20px"
            class="rounded-lg bg-foreground px-4 py-2 text-background transition duration-500 hover:scale-110">
            关注 🎉
          </ConfettiButton>
          <t-button @click="handleOperate(userInfo, 4)" v-else class="btn" style="margin-right: 20px">取消关注</t-button>
          <t-button theme="primary" class="btn" @click="handleMessage">私信</t-button>
        </div>
      </div>
    </div>

    <div class="user-mains">
      <ul class="tabs">
        <li v-for="(item, index) in dialogMenus" :key="item.id" @click="handleActiveLi(item.id, index)"
          :class="{ isActive: item.isActive }">
          {{ item.name }}
        </li>
      </ul>

      <ul v-if="!isLoading" class="videoList">
        <li v-for="item in videoList" :key="item.id" @click="handleVideo">
          <img v-show="!item.isShow" @mouseenter="item.isShow = true" style="width: 100%;height: 90%;object-fit: cover"
            :src="item.fengMian" alt="">
          <video @click.prevent="() => { }" controls @mouseover="(e) => e.target.play()"
            :src="item.isShow ? item.videoUrl : ''" v-show="item.isShow"
            @mouseleave="(e) => { e.target.pause(); item.isShow = false }"
            style="width: 100%;height: 90%;object-fit: cover">
          </video>

          <span class="videoTitle">{{ item.videoTitle }}</span>
        </li>
      </ul>
      <div v-else style="width: 100%;height: 90%;display: flex;justify-content: center;align-items: center">
        <div class="loader"></div>
      </div>
    </div>
  </div>
</template>

<script setup>

import { useUserStore } from "@/stores/modules/user.js";
const userStore = useUserStore();
import { ref, onMounted, nextTick } from 'vue'
import { getUserProfile } from '../api/user/profile'
import { CloseIcon } from "tdesign-icons-vue-next";
import { reqAddUserLikeVideo, reqNotOperateVideo, reqOperateVideo, reqUserVideo } from "@/api/video/index.js";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
import { MessagePlugin } from "tdesign-vue-next";
import { reqUserInfoDetail } from "@/api/user/index.js";
import ConfettiButton from "@/components/ui/ConfettiButton.vue";
import HoverButton from "@/components/ui/HoverButton.vue";
import { reqAddSession } from "@/api/user/message.js";
const dialogMenus = ref([
  {
    name: '作品',
    isActive: true,
    id: 1,
    type: 5
  },
  {
    name: '喜欢',
    isActive: false,
    id: 2,
    type: 6
  },
  {
    name: '收藏',
    isActive: false,
    id: 3,
    type: 7
  }, {
    name: '观看历史',
    isActive: false,
    id: 4,
    type: 8
  },
]);
const userProfile = ref({})
const isLoading = ref(false);
const videoList = ref([])
const userInfo = ref({})
const userId = route.query.userId ? route.query.userId : userStore.userId
const getUserInfo = async () => {
  const res = await reqUserInfoDetail(userId)
  if (res.code == 200) {
    userInfo.value = res.data
  } else {
    MessagePlugin.error('获取用户信息失败')
  }
}

const handleOperate = async (item, type, operate) => {
  let title = ''
  switch (type) {
    case 1: title = '喜欢'; break;
    case 2: title = '收藏'; break;
    case 3: title = '分享'; break;
    case 4: title = '关注'; break;
  }
  const obj = {
    type: type,
    userId: userInfo.value.userId
  }

  if (operate === 1) {
    const res = await reqOperateVideo(obj);
    if (res.code === 200) {
      switch (type) {
        case 4: userInfo.value.isGuanZhu = true; break;
      }
      MessagePlugin.success(`${title}成功！`)
    } else {
      MessagePlugin.error(`${title}失败！`)
    }
  } else {
    const res = await reqNotOperateVideo(obj);
    if (res.code === 200) {
      switch (type) {
        case 4: userInfo.value.isGuanZhu = false; break;
      }
      MessagePlugin.success(`取消${title}成功！`)
    } else {
      MessagePlugin.error(`取消${title}失败！`)
    }
  }
}


// 点击私信
const handleMessage = async () => {
  const res = await reqAddSession(userInfo.value.userId)
  if (res.code == 200) {



  }
}

// 点击视频时
const handleVideo = () => {
  const menu = dialogMenus.value.filter(item => item.isActive)[0]
  router.push(`/videoList?type=${menu.type}&redirect=profile&userId=${userInfo.value.userId}`)
}


// 获取视频列表
const getVideoList = async (type) => {
  isLoading.value = true
  const obj = {
    type: type,
    userId: userId,
  }
  const res = await reqUserVideo(obj);
  if (res.code == 200) {
    videoList.value = res.data
  } else {
    MessagePlugin.error('获取列表失败！')
    videoList.value = []
  }
  isLoading.value = false
};
// 激活选项卡时
const handleActiveLi = (id, index) => {
  getVideoList(index + 1)
  dialogMenus.value.forEach((item) => {
    item.isActive = item.id == id;
  })
}
onMounted(async () => {
  getUserInfo()
  await getVideoList(1)
})
</script>

<style scoped>
.btn {
  background-color: red;
  border: red;
  border-radius: 20px;
}

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 60px;
  aspect-ratio: 1;
  --g: conic-gradient(from -90deg at 10px 10px, #fff 90deg, #0000 0);
  background: var(--g), var(--g), var(--g);
  background-size: 50% 50%;
  animation: l19 1s infinite;
}

@keyframes l19 {
  0% {
    background-position: 0 0, 10px 10px, 20px 20px
  }

  33% {
    background-position: 10px 10px
  }

  66% {
    background-position: 0 20px, 10px 10px, 20px 0
  }

  100% {
    background-position: 0 0, 10px 10px, 20px 20px
  }
}

.videoTitle {
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  /* 限制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  /* 必须覆盖nowrap */
}

.videoList video,
.videoList img {
  border-radius: 10px;
}

.videoList {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
  grid-auto-rows: 300px;
  height: 90%;
  /* 核心代码：隐藏滚动条但保留功能 */
  overflow-y: scroll;
  /* 强制启用滚动 */
  scrollbar-width: none;
  /* 隐藏 Firefox 滚动条 */
  -ms-overflow-style: none;
  /* 隐藏 IE/Edge 滚动条 */
  ;
}


.videoList li {
  overflow: auto;
  display: flex;
  cursor: pointer;
  flex-direction: column;
}

.header-left {
  padding: 20px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.header-left,
.header-right {
  height: 100%;
  box-sizing: border-box;
  padding-right: 60px;
  display: flex;
  align-items: flex-end;
}

.tabs {
  display: flex;
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
}

.tabs li {
  padding: 10px 15px;
  margin-right: 10px;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  /* 防止文字换行 */

}

.tabs .isActive {
  border-bottom-color: red;
  color: white;
}

.user-mains {
  flex: 1;
  /* 占据剩余空间 */
  min-height: 0;
  /* 修复 Flex 容器溢出问题 */
  box-sizing: border-box;
  padding: 0 20px;
}

.profile-header {
  flex: 0 0 auto;
  /* 不伸缩，高度由内容决定 */
  display: flex;
  justify-content: space-between;
}

.profile-view {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #c0c0d6;
}
</style>
